<template>
  <div>
    <div class="row q-col-gutter-sm">
      <div class="col-12">
        <q-input v-model="searchKey" dense>
          <template v-slot:prepend>
            <q-icon name="search" />
          </template>
        </q-input>
      </div>
      <div class="col-12">
        <q-btn-toggle spread
                      no-caps
                      dense
                      flat
                      v-model="sortBy"
                      :options="[
                        {label: '默认排序', value: 'default'},
                        {label: '星级升序', value: 'starUp'},
                        {label: '星级降序', value: 'starDown'},
                        {label: 'Rank升序', value: 'rankUp'},
                        {label: 'Rank降序', value: 'rankDown'}
                      ]" />
      </div>
      <div v-for="item in resultList"
           :key="item.id"
           class="col-auto"
           @click="onClickEvent(item.id)">
        <character :avatar="item.avatar"
                   :name="item.name"
                   :rank="item.rank"
                   :star="item.star"
                   :disable="item.disable"
                   style="width: 96px">
          <template v-slot:default>
            <slot name="avatar" :item="item"/>
          </template>
        </character>
      </div>
    </div>
  </div>
</template>

<script>
import Character from "components/Character";
export default {
  name: "CharacterList",
  components: {Character},
  data: function () {
    return {
      loading: false,
      searchKey: '',
      sortBy: 'default'
    }
  },
  props: {
    list: {
      type: Array,
      required: true
    },
    itemsPerRow: {
      type: Number,
      default: 4
    }
  },
  model: {
    prop: 'list',
    event: 'doModelChange'
  },
  computed: {
    resultList: {
      get () {
        if (!this.list) return null;
        const list = [];
        for (const i of this.list) {
          if (i.name && i.name.indexOf(this.searchKey) > -1) list.push(i);
        }
        list.sort((a, b) => (a.name > b.name) ? 1 : -1);
        if (this.sortBy === 'starUp') list.sort((a, b) => a.star - b.star);
        if (this.sortBy === 'starDown') list.sort((a, b) => b.star - a.star);
        if (this.sortBy === 'rankUp') list.sort((a, b) => a.rank - b.rank);
        if (this.sortBy === 'rankDown') list.sort((a, b) => b.rank - a.rank);
        return list;
      }
    }
  },
  methods: {
    onClickEvent (id) {
      this.$emit('click', id);
    }
  }
}
</script>

<style scoped>
.mask {
  width: 100%;
  height: 100%;
  background: url('../../public/img/character/border.png');
  background-size: 100% 100%;
  top: 0;
  left: 0;
}
</style>
